<template>
  <div class="order">
    <Header title="订单 " />
    <div class="content">
      <van-tabs color="#ffc400">
        <van-tab :title="item" v-for="(item, index) in navData" :key="index">
          <template v-if="store.state.orderListEnd.length && item === '全部'">
            <div v-for="(i, index) in store.state.orderListEnd" :key="index">
              <van-card :num="i.num" :price="i.price" :title="i.title" :thumb="i.pic" />
            </div>
          </template>
          <template v-else>
            <div>
              <Empty />
            </div>
          </template>
        </van-tab>
      </van-tabs>
    </div>
    <Footer />
  </div>
</template>

<script>
import Empty from '@/components/Empty.vue';
import Footer from '@/components/Footer.vue';
import Header from '@/components/header.vue';
import { reactive, toRefs } from 'vue';
import { useStore } from 'vuex';
export default {
  components: {
    Footer,
    Header,
    Empty
  },
  setup() {
    const store = useStore()
    const data = reactive({
      navData: ['全部', '交易完成', '待付款', '待发货', '已发货']
    })
    return {
      ...toRefs(data),
      store,
    }
  }
}
</script>

<style scoped lang="less">
.order {
  display: flex;
  flex-flow: column;
  height: 100%;

  .content {
    flex: 1;
    overflow-y: auto;
  }
}
</style>